<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
  用户名：<input type="text" id="username">
  密码：<input type="text" id="password">
  <button class="submit">注册</button>
  <button class="login">登录</button><br>
  <button class="getUserInfo">获取用户信息</button><br>
  id:<input type="number" id="id" disabled>
  昵称:<input type="text" id="nickname">
  邮箱:<input type="email" id="email">
  <button class="updateUserinfo">修改用户信息</button><br>
  原密码：<input type="text" id="oldpwd">
  新密码：<input type="text" id="newpwd">
  <button class="updatePwd">修改密码</button>
  头像base64:<textarea name="avatar" id="avatar" cols="30" rows="10"></textarea>
  <button class="updateAvatar">修改头像</button>
  <script>
    $(function() {
      let token, userInfo
      // 注册
      $('.submit').on('click', () => {
        let userInfo = {
          username: $('#username').val(),
          password: $('#password').val()
        }
        $.ajax({
          url: 'http://127.0.0.1/api/reguser',
          type: 'POST',
          data: userInfo,
          success: (res) => {
            console.log(res)
          }
        })
      })

      // 登录
      $('.login').on('click', () => {
        let userInfo = {
          username: $('#username').val(),
          password: $('#password').val()
        }
        $.ajax({
          url: 'http://127.0.0.1/api/login',
          type: 'POST',
          data: userInfo,
          success: (res) => {
            console.log(res)
            token = res.token
          }
        })
      })

      // 获取用户信息
      $('.getUserInfo').on('click', () => {
        $.ajax({
          url: 'http://127.0.0.1/my/userinfo',
          type: 'GET',
          beforeSend: (xhr) => {
            xhr.setRequestHeader('Authorization', token)
          },
          success: (res) => {
            console.log(res)
            userInfo = res.data
            refresh()
          }
        })
      })

      // 修改用户信息
      $('.updateUserinfo').on('click', () => {
        getFresh()
        $.ajax({
          url: 'http://127.0.0.1/my/userinfo',
          type: 'POST',
          data: userInfo,
          beforeSend: (xhr) => {
            xhr.setRequestHeader('Authorization', token)
          },
          success: res => {
            console.log(res)
          }
        })
      })

      // 修改密码
      $('.updatePwd').on('click', () => {
        let pwdGroup = {
          oldpwd: $('#oldpwd').val(),
          newpwd: $('#newpwd').val()
        }
        $.ajax({
          url: 'http://127.0.0.1/my/updatepwd',
          type: 'POST',
          data: pwdGroup,
          beforeSend: (xhr) => {
            xhr.setRequestHeader('Authorization', token)
          },
          success: (res) => {
            console.log(res)
          }
        })
      })

      // 修改头像
      $('.updateAvatar').on('click', () => {
        let avatar = $('#avatar').val()
        $.ajax({
          url: 'http://127.0.0.1/update/avatar',
          type: 'POST',
          data: avatar,
          beforeSend: (xhr) => {
            xhr.setRequestHeader('Authorization', token)
          }
        })
      })

      // 更新本地数据
      const refresh = () => {
        $('#id').val(userInfo.id)
        $('#nickname').val(userInfo.nickname)
        $('#email').val(userInfo.email)
      }
      // 获取本地数据
      const getFresh = () => {
        userInfo = {
          id: $('#id').val(),
          nickname: $('#nickname').val(),
          email: $('#email').val()
        }
      }
    })
  </script>
</body>
</html>